<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Media Star - Responsive Html5 Portfolio Template</title>
    <meta name="description" content="Media Star - Responsive Html5 Portfolio Template" />
    <meta name="author" content="Felixplus - www.felixplus.com" />
    <meta name="keywords" content="wordpress, themes, wordpress themes, premium wordpress themes, premium themes, wordpress theme shop, free themes, drupal themes, wordpress templates" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />		
	<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
    <link rel="stylesheet" href="css/quick-sand.css" type="text/css" media="all">
    <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="all">
    <link rel="stylesheet" href="css/flexslider.css" type="text/css" media="all">
    <link rel="stylesheet" href="style.css" type="text/css" media="all" />
    <link rel="stylesheet" href="css/responsive.css" type="text/css" media="all">
    <!--[if IE 7]><link rel="stylesheet" href="css/ie7.css" type="text/css" media="all" /><![endif]-->
	<!--[if IE 8]><link rel="stylesheet" href="css/ie8.css" type="text/css" media="all" /><![endif]-->
	<!--[if IE]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
		<link rel="stylesheet" href="css/ie.css" type="text/css" media="all" />
	<![endif]-->
    <!-- Favicons
	================================================== -->
	<link rel="shortcut icon" href="images/favicon.ico">
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
    <script type="text/javascript" src="js/jquery.isotope.min.js"></script>
    <script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
    <script type="text/javascript" src="js/jquery.infinitescroll.min.js"></script>
    <script type="text/javascript" src="js/jquery.form.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
	<script type="text/javascript" src="js/sequence.jquery-min.js"></script>
    <script type="text/javascript" src="js/jquery.vegas.js"></script>
	<script type="text/javascript" src="js/jquery.tubular.1.0.js"></script>
    <script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
    <script type="text/javascript" src="js/jflickrfeed.min.js"></script>
    <script type="text/javascript" src="js/jquery.flexslider.js"></script>
	<script type="text/javascript" src="js/customSelect.jquery.js"></script>
    <script type="text/javascript" src="js/custom.js"></script>

    <!-- Font
	================================================== -->
    <link href='http://fonts.googleapis.com/css?family=Coda' rel='stylesheet' type='text/css'>   

</head>
<body class="sub right-sidebar-page fixed-width">
    <div class="wrapper clearfix">
        <div id="sidebar">
        	<div id="logo-image">
            	<a href="index.html"><img src="placeholders/logo.png" alt="" /></a>
            </div>
            <nav id="main-nav">
            	<ul id="main-menu">
                	<li class="menu-home menu-parent"><a href="index.html"><span>Home</span></a></li>
                    <li class="menu-portfolio menu-parent"><a href="portfolio.html"><span>Portfolio</span></a></li>
                    <li class="menu-blog menu-parent">
                    	<a href="#"><span>Blog</span></a>
                        <ul>
                        	<li><a href="blog-v1.html">Blog isotope style 1</a></li>
                            <li><a href="blog-v2.html">Blog isotope style 2</a></li>
                            <li><a href="blog-v3.html">Blog timeline style</a></li>
                            <li><a href="blog-v4.html">Blog classic style</a></li>
                        </ul>
                    </li>
                    <li class="menu-bg menu-parent">
                    	<a href="#"><span>Background</span></a>
                        <ul>
                        	<li><a href="bg-slide.html">Image slide</a></li>
                            <li><a href="bg-video.html">Video slide</a></li>
                        </ul>
                    </li>
                    <li class="current-menu-item menu-feature menu-parent">
                    	<a href="#"><span>Features</span></a>
                        <ul>
                        	<li><a href="about.html">About</a></li>
                            <li><a href="single.html">Single</a></li>
                            <li><a href="bg-slide-content.html">Single with bg slide</a></li>
                            <li><a href="right-sidebar-full.html">Right sidebar full width</a></li>
                            <li><a href="right-sidebar-fixed.html">Right sidebar fixed width</a></li>
							<li><a href="left-sidebar.html">Left sidebar</a></li>
                            <li><a href="elements.html">Elements</a></li>
                            <li><a href="404.html">404 error</a></li>
                        </ul>
                    </li>
                    <li class="menu-colors menu-parent">
                    	<a href="#"><span>Color styles</span></a>
                        <ul>
                            <li><a href="http://felixplus.com/demo/mediastar/html/skins/facebook/index.html">Facebook</a></li>
                            <li><a href="http://felixplus.com/demo/mediastar/html/skins/dark/index.html">Dark</a></li>
                        </ul>
                    </li>
                    <li class="menu-purchase menu-parent"><a href="http://themeforest.net/item/mediastar-responsive-html5-portfolio-template/3805427"><span>Purchase</span></a></li>
<li class="menu-contact menu-parent"><a href="contact.html"><span>Contact</span></a></li>
                </ul><!--end:main-menu-->
            </nav><!--end:main-nav-->
            <aside class="twitter-widget">
            	<img src="images/icons/tweet-icon.png" alt="" />
                <div class='twitter_outer'>
                    <input type='hidden' class='tweet_id' value='envato'>
                    <input type='hidden' class='tweet_count' value='1'>
                    <div class='twitter_inner'></div>
                </div>
            </aside><!--end:widget-->
            <div id="bottom-sidebar">
            	<ul class="social-links clearfix">				
                    <li>
                        <a target="_blank" title="Facebook" href="https://www.facebook.com/felixplusthemes">
                            <img class="bottom" src="images/icons/socials/hover/facebook.png" alt="" />
  							<img class="top" src="images/icons/socials/default/facebook.png" alt="" />
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="Twitter" href="https://twitter.com/Felixplusthemes">
                            <img class="bottom" src="images/icons/socials/hover/twitter.png" alt="" />
  							<img class="top" src="images/icons/socials/default/twitter.png" alt="" />                        
                        </a>
                    </li>                    
                    <li>
                        <a target="_blank" title="Behance" href="http://www.behance.net/felixplus">
                            <img class="bottom" src="images/icons/socials/hover/behance.png" alt="" />
  							<img class="top" src="images/icons/socials/default/behance.png" alt="" />                        
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="Flickr" href="http://www.flickr.com/photos/felixthemes/">
                            <img class="bottom" src="images/icons/socials/hover/flickr.png" alt="" />
  							<img class="top" src="images/icons/socials/default/flickr.png" alt="" />                       
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="Evanto" href="http://themeforest.net/user/felixplus">
                            <img class="bottom" src="images/icons/socials/hover/evanto.png" alt="" />
  							<img class="top" src="images/icons/socials/default/evanto.png" alt="" />                      
                        </a>
                    </li>
                                       
                </ul><!--end:social-links-->
            </div><!--end:bottom-sidebar-->
            <p id="copyright">copyright 2013 © <a target="_blank" href="http://themeforest.net/user/felixplus">felixplus.com</a></p>
        </div><!--end:sidebar-->
        <div id="left-panel">&raquo;</div>
        <div id="main-content">
        	<div id="mobile-logo-image">
            	<a href="index.html"><img src="placeholders/logo-mobile.png" alt="" /></a>
            </div><!--end:mobile-logo-image-->

                <section class="element-box">
                    <h3 class="element-title">Columns</h3>
                    <div class="flx_one_two">
                    	<span class="flx-dropcap">1</span>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan. Sed sagittis mattis lorem at pretium. Pellentesque habitant morbi tristique.Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
                    </div><!--end:flx_one_two-->
                    <div class="flx_one_two last">
                    	<span class="flx-dropcap">2</span>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan. Sed sagittis mattis lorem at pretium. Pellentesque habitant morbi tristique.Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
                    </div><!--end:flx_one_third-->
                    <div class="clear"></div>
                    <hr>
                    <div class="flx_one_third">
                    	<span class="flx-dropcap">1</span>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan. Sed sagittis mattis lorem at pretium. Pellentesque habitant morbi tristique.Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
                    </div><!--end:flx_one_third-->
                    <div class="flx_one_third">
                    	<span class="flx-dropcap">2</span>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan. Sed sagittis mattis lorem at pretium. Pellentesque habitant morbi tristique.Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
                    </div><!--end:flx_one_third-->
                    <div class="flx_one_third last">
                    	<span class="flx-dropcap">3</span>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan. Sed sagittis mattis lorem at pretium. Pellentesque habitant morbi tristique.Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
                    </div><!--end:flx_one_third-->
                    <div class="clear"></div>
                    <hr>
                    <div class="flx_one_third">
                    	<span class="flx-dropcap">1</span>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan. Sed sagittis mattis lorem at pretium. Pellentesque habitant morbi tristique.Aenean eu leo quam.</p>
                    </div><!--end:flx_one_third-->
                    <div class="flx_two_third last">
                    	<span class="flx-dropcap">2</span>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan. Sed sagittis mattis lorem at pretium. Pellentesque habitant morbi tristique.Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
                    </div><!--end:flx_two_third-->
                    <div class="clear"></div>
                    <hr>
                    <div class="flx_one_forth">
                    	<span class="flx-dropcap">1</span>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan. Sed sagittis mattis lorem at pretium. Pellentesque habitant morbi tristique.Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
                    </div><!--end:flx_one_forth-->
                    <div class="flx_one_forth">
                    	<span class="flx-dropcap">2</span>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan. Sed sagittis mattis lorem at pretium. Pellentesque habitant morbi tristique.Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
                    </div><!--end:flx_one_forth-->
                    <div class="flx_one_forth">
                    	<span class="flx-dropcap">3</span>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan. Sed sagittis mattis lorem at pretium. Pellentesque habitant morbi tristique.Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
                    </div><!--end:flx_one_forth-->
                    <div class="flx_two_forth last">
                    	<span class="flx-dropcap">4</span>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan. Sed sagittis mattis lorem at pretium. Pellentesque habitant morbi tristique.Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
                    </div><!--end:flx_two_forth-->
                    <div class="clear"></div>
                    <hr>
                    <div class="flx_one_forth">
                    	<span class="flx-dropcap">1</span>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan. Sed sagittis mattis lorem at pretium. Pellentesque habitant morbi tristique</p>
                    </div><!--end:flx_one_third-->
                    <div class="flx_three_forth last">
                    	<span class="flx-dropcap">2</span>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut elit ut ipsum tristique accumsan. Sed sagittis mattis lorem at pretium. Pellentesque habitant morbi tristique.Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
                    </div><!--end:flx_two_third-->
                    <div class="clear"></div>
                    <h3 class="element-title">Heading</h3> 
                    <h1>Heading 1</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec purus tellus, quis pulvinar tortor. Sed mattis lobortis gravida. Integer convallis ipsum in neque tempus posuere.</p>
                    <h2>Heading 2</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec purus tellus, quis pulvinar tortor. Sed mattis lobortis gravida. Integer convallis ipsum in neque tempus posuere.</p>
                    <h3>Heading 3</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec purus tellus, quis pulvinar tortor. Sed mattis lobortis gravida. Integer convallis ipsum in neque tempus posuere.</p>
                    <h4>Heading 4</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec purus tellus, quis pulvinar tortor. Sed mattis lobortis gravida. Integer convallis ipsum in neque tempus posuere.</p>
                    <h5>Heading 5</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec purus tellus, quis pulvinar tortor. Sed mattis lobortis gravida. Integer convallis ipsum in neque tempus posuere.</p>
                    <h6>Heading 6</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec purus tellus, quis pulvinar tortor. Sed mattis lobortis gravida. Integer convallis ipsum in neque tempus posuere.</p>
                    <h3 class="element-title">Blockquotes</h3>
                    <blockquote>
                        <span>"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu"</span>
                    </blockquote>
                    <h3 class="element-title">List Styles</h3>
                    <div class="elements-list">
                        <ul class="default-list">
                            <li>Default list - Lorem ipsum dolor sit amet</li>
                            <li>Default list - Lorem ipsum dolor sit amet</li>
                            <li>Default list - Lorem ipsum dolor sit amet</li>
                            <li>Default list - Lorem ipsum dolor sit amet</li>
                        </ul>
                        <ul class="check-list">
                            <li>Check list - Lorem ipsum dolor sit amet</li>
                            <li>Check list - Lorem ipsum dolor sit amet</li>
                            <li>Check list - Lorem ipsum dolor sit amet</li>
                            <li>Check list - Lorem ipsum dolor sit amet</li>
                        </ul>
                        <ul class="arrow-list">
                            <li>Arrow List - Lorem ipsum dolor sit amet</li>
                            <li>Arrow List - Lorem ipsum dolor sit amet</li>
                            <li>Arrow List - Lorem ipsum dolor sit amet</li>
                            <li>Arrow List - Lorem ipsum dolor sit amet</li>
                        </ul>
                        <ul class="star-list">
                            <li>Star List - Lorem ipsum dolor sit amet</li>
                            <li>Star List - Lorem ipsum dolor sit amet</li>
                            <li>Star List - Lorem ipsum dolor sit amet</li>
                            <li>Star List - Lorem ipsum dolor sit amet</li>
                        </ul>
                    </div>
                    <div class="clear"></div>
                    <h3 class="element-title">Tabs</h3>
                    <div class="list-container">
                        <ul class="tabs clearfix">
                            <li><a href="#tab1">Tab 1</a></li>
                            <li><a href="#tab2">Tab 2</a></li>
                            <li><a href="#tab3">Tab 3</a></li>
                        </ul><!--end:tabs-->
                    </div><!--end:list-container-->
                    <div class="tab-container">
                        <div id="tab1" class="tab-content">                        
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset</p>
                        </div><!--end:tab-content-->
                        <div id="tab2" class="tab-content">                        
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset</p>
                        </div><!--end:tab-content-->
                        <div id="tab3" class="tab-content">                        
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset</p>
                        </div><!--end:tab-content-->            
                    </div><!--end:tab-container-->
                    <h3 class="element-title">Dropcaps</h3>
                    <p>
                        <span class="flx-dropcap">L</span>
                        orem ipsum dolor sit amet, consectetur adipiscing elit. duis nec purus tellus consectetur. Duis nec purus tellus, quis pulvinar tortor, consectetur adipiscing elit. Duis nec purus tellus, quis pulvinar tortoripsum dolor sit amet, verenam operibus furiam conclusoque sponte profundo. Conservus mihi esse haec aliquam inlido laetare quod eam ad per..
                    </p>
                    <p>
                        <span class="flx-dropcap">A</span>
                        ntiochia ipsum dolor sit amet, verenam operibus furiam conclusoque sponte profundo. Conservus mihi esse haec aliquam inlido laetare quod eam ad peripsum dolor sit amet, verenam operibus furiam conclusoque sponte profundo. Conservus mihi esse haec aliquam inlido laetare quod eam ad per..
                    </p>
                    <p>
                        <span class="flx-dropcap dark">L</span>
                        orem ipsum dolor sit amet, consectetur adipiscing elit. duis nec purus tellus consectetur. Duis nec purus tellus, quis pulvinar tortor, consectetur adipiscing elit. Duis nec purus tellus, quis pulvinar tortoripsum dolor sit amet, verenam operibus furiam conclusoque sponte profundo. Conservus mihi esse haec aliquam inlido laetare quod eam ad per..
                    </p>
                    <p>
                        <span class="flx-dropcap dark">A</span>
                        ntiochia ipsum dolor sit amet, verenam operibus furiam conclusoque sponte profundo. Conservus mihi esse haec aliquam inlido laetare quod eam ad peripsum dolor sit amet, verenam operibus furiam conclusoque sponte profundo. Conservus mihi esse haec aliquam inlido laetare quod eam ad per.
                    </p>
                    <h3 class="element-title">Accordion</h3>
                    <div class="acc-wrapper">
						<div class="accordion-title">
							<h5><a href="#">Accordion 1</a></h5>
						</div>
						<div class="accordion-container">
							Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
						</div>
						<div class="accordion-title">
						  <h5><a href="#">Accordion 2</a></h5>
						</div>
						<div class="accordion-container">
							Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
						</div>
						<div class="accordion-title">
						  <h5><a href="#">Accordion 3</a></h5>
						</div>
						<div class="accordion-container">
							Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
						</div>
					</div><!--end:acc-wrapper-->
                    <h3 class="element-title">Testimonial</h3>
                    <div class="testimonials">
                        <div class="flexslider" id="flexslider">
                            <ul class="slides">
                                <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset</li>
                                <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset</li>
                            </ul><!--end:slides-->
                        </div><!--end:flexslider-->
                    </div><!--end:testimonials-->
                    <h3 class="element-title">Buttons</h3>
					<a href="#" class="more-link clearfix"><span class="more-link-icon">&nbsp;</span><span class="more-link-text">Button with icon & text</span></a>
                    <br>
					<a class="green-button" href="#">Green button</a>
                    <a class="blue-button" href="#">Blue button</a>
                    <a class="orange-button" href="#">Orange button</a>
                    <a class="red-button" href="#">Red button</a>
                    <a class="pink-button" href="#">Pink button</a>
                    <a class="grey-button" href="#">Grey button</a>
                    <a class="black-button" href="#">Black button</a>	
                    
                    <h3 class="element-title">Alert Box</h3>
                	<div class="alert-box red">
                    	<p>You have a problem</p>
                    </div>
                    
                    <div class="alert-box yellow">
                    	<p>Alert You have a small problem</p>
                    </div>
                    
                    <div class="alert-box blue">
                    	<p>You have a problem</p>
                    </div>
                    
                    <div class="alert-box green">
                    	<p>Alert ! Evething it’s ok. You’re Done</p>
                    </div>
                    
                    <div class="alert-box gray">
                    	<p>You have a problem</p>
                    </div>
                    
                    <!--start: socials icons -->
                    <h3 class="element-title">24 Socials icons</h3>
                    <center>
                    <ul class="social-links socials-box clearfix">				
                        <li>
                            <a target="_blank" title="Facebook" href="#">
                                <img class="bottom" src="images/icons/socials/hover/facebook.png" alt="" />
                                <img class="top" src="images/icons/socials/default/facebook.png" alt="" />
                            </a>
                            <span> Facebook</span>
                        </li>
                        <li>
                            <a target="_blank" title="twitter" href="#">
                                <img class="bottom" src="images/icons/socials/hover/twitter.png" alt="" />
                                <img class="top" src="images/icons/socials/default/twitter.png" alt="" />
                            </a>
                            <span> Twitter</span>
                        </li>
                        <li>
                            <a target="_blank" title="Flickr" href="#">
                                <img class="bottom" src="images/icons/socials/hover/flickr.png" alt="" />
                                <img class="top" src="images/icons/socials/default/flickr.png" alt="" />
                            </a>
                            <span> Flickr</span>
                        </li>
                        <li>
                            <a target="_blank" title="Behance" href="#">
                                <img class="bottom" src="images/icons/socials/hover/behance.png" alt="" />
                                <img class="top" src="images/icons/socials/default/behance.png" alt="" />
                            </a>
                            <span> Behance</span>
                        </li>
                        <li>
                            <a target="_blank" title="Deviantart" href="#">
                                <img class="bottom" src="images/icons/socials/hover/deviantart.png" alt="" />
                                <img class="top" src="images/icons/socials/default/deviantart.png" alt="" />
                            </a>
                            <span> Deviantart</span>
                        </li>
                        <li>
                            <a target="_blank" title="Digg" href="#">
                                <img class="bottom" src="images/icons/socials/hover/digg.png" alt="" />
                                <img class="top" src="images/icons/socials/default/digg.png" alt="" />
                            </a>
                            <span> Digg</span>
                        </li>
                        <li>
                            <a target="_blank" title="Dribbble" href="#">
                                <img class="bottom" src="images/icons/socials/hover/dribbble.png" alt="" />
                                <img class="top" src="images/icons/socials/default/dribbble.png" alt="" />
                            </a>
                            <span> Dribbble</span>
                        </li>
                        <li>
                            <a target="_blank" title="Dropbox" href="#">
                                <img class="bottom" src="images/icons/socials/hover/dropbox.png" alt="" />
                                <img class="top" src="images/icons/socials/default/dropbox.png" alt="" />
                            </a>
                            <span> Dropbox</span>
                        </li>
                        <li>
                            <a target="_blank" title="Drupal" href="#">
                                <img class="bottom" src="images/icons/socials/hover/drupal.png" alt="" />
                                <img class="top" src="images/icons/socials/default/drupal.png" alt="" />
                            </a>
                            <span> Drupal</span>
                        </li>
                        <li>
                            <a target="_blank" title="Evanto" href="#">
                                <img class="bottom" src="images/icons/socials/hover/evanto.png" alt="" />
                                <img class="top" src="images/icons/socials/default/evanto.png" alt="" />
                            </a>
                            <span> Evanto</span>
                        </li>
                        <li>
                            <a target="_blank" title="Fancy" href="#">
                                <img class="bottom" src="images/icons/socials/hover/fancy.png" alt="" />
                                <img class="top" src="images/icons/socials/default/fancy.png" alt="" />
                            </a>
                            <span> Fancy</span>
                        </li>
                        <li>
                            <a target="_blank" title="Flickr" href="#">
                                <img class="bottom" src="images/icons/socials/hover/flickr.png" alt="" />
                                <img class="top" src="images/icons/socials/default/flickr.png" alt="" />
                            </a>
                            <span> Flickr</span>
                        </li>
                        <li>
                            <a target="_blank" title="Google Plus" href="#">
                                <img class="bottom" src="images/icons/socials/hover/googleplus.png" alt="" />
                                <img class="top" src="images/icons/socials/default/googleplus.png" alt="" />
                            </a>
                            <span> Google Plus</span>
                        </li>
                        <li>
                            <a target="_blank" title="Foursquare" href="#">
                                <img class="bottom" src="images/icons/socials/hover/foursquare.png" alt="" />
                                <img class="top" src="images/icons/socials/default/foursquare.png" alt="" />
                            </a>
                            <span>Foursquare</span>
                        </li>
                        <li>
                            <a target="_blank" title="Joomla" href="#">
                                <img class="bottom" src="images/icons/socials/hover/joomla.png" alt="" />
                                <img class="top" src="images/icons/socials/default/joomla.png" alt="" />
                            </a>
                            <span>Joomla</span>
                        </li>
                        <li>
                            <a target="_blank" title="Lastfm" href="#">
                                <img class="bottom" src="images/icons/socials/hover/lastfm.png" alt="" />
                                <img class="top" src="images/icons/socials/default/lastfm.png" alt="" />
                            </a>
                            <span>Lastfm</span>
                        </li>
                        <li>
                            <a target="_blank" title="Mobypicture" href="#">
                                <img class="bottom" src="images/icons/socials/hover/mobypicture.png" alt="" />
                                <img class="top" src="images/icons/socials/default/mobypicture.png" alt="" />
                            </a>
                            <span>Mobypicture</span>
                        </li>
                        <li>
                            <a target="_blank" title="My space" href="#">
                                <img class="bottom" src="images/icons/socials/hover/myspace.png" alt="" />
                                <img class="top" src="images/icons/socials/default/myspace.png" alt="" />
                            </a>
                            <span>My space</span>
                        </li>
                        <li>
                            <a target="_blank" title="Pinterest" href="#">
                                <img class="bottom" src="images/icons/socials/hover/pinterest.png" alt="" />
                                <img class="top" src="images/icons/socials/default/pinterest.png" alt="" />
                            </a>
                            <span>Pinterest</span>
                        </li>
                        <li>
                            <a target="_blank" title="Rss" href="#">
                                <img class="bottom" src="images/icons/socials/hover/rss.png" alt="" />
                                <img class="top" src="images/icons/socials/default/rss.png" alt="" />
                            </a>
                            <span>Rss</span>
                        </li>
                        <li>
                            <a target="_blank" title="Skype" href="#">
                                <img class="bottom" src="images/icons/socials/hover/skype.png" alt="" />
                                <img class="top" src="images/icons/socials/default/skype.png" alt="" />
                            </a>
                            <span>Skype</span>
                        </li>
                        <li>
                            <a target="_blank" title="tumblr" href="#">
                                <img class="bottom" src="images/icons/socials/hover/tumblr.png" alt="" />
                                <img class="top" src="images/icons/socials/default/tumblr.png" alt="" />
                            </a>
                            <span>Tumblr</span>
                        </li>
                        <li>
                            <a target="_blank" title="vimeo" href="#">
                                <img class="bottom" src="images/icons/socials/hover/vimeo.png" alt="" />
                                <img class="top" src="images/icons/socials/default/vimeo.png" alt="" />
                            </a>
                            <span>Vimeo</span>
                        </li>
                        <li>
                            <a target="_blank" title="wordpress" href="#">
                                <img class="bottom" src="images/icons/socials/hover/wordpress.png" alt="" />
                                <img class="top" src="images/icons/socials/default/wordpress.png" alt="" />
                            </a>
                            <span>Wordpress</span>
                        </li>
                    </ul> <!--end:socials-box-->
                    </center>
                    
                    
                    
                    <h3 class="element-title">Table</h3>
                    <h2 class="table-title">Table Style 1</h2>
            
                    <center>
                        <table class="table1">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th scope="col" abbr="Starter">Smart Starter</th>
                                    <th scope="col" abbr="Medium">Smart Medium</th>
                                    <th scope="col" abbr="Business">Smart Business</th>
                                    <th scope="col" abbr="Deluxe">Smart Deluxe</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th scope="row">Price per month</th>
                                    <td>$ 2.90</td>
                                    <td>$ 5.90</td>
                                    <td>$ 9.90</td>
                                    <td>$ 14.90</td>
                                </tr>
                            </tfoot>
                            <tbody>
                                <tr>
                                    <th scope="row">Storage Space</th>
                                    <td>512 MB</td>
                                    <td>1 GB</td>
                                    <td>2 GB</td>
                                    <td>4 GB</td>
                                </tr>
                                <tr>
                                    <th scope="row">Bandwidth</th>
                                    <td>50 GB</td>
                                    <td>100 GB</td>
                                    <td>150 GB</td>
                                    <td>Unlimited</td>
                                </tr>
                                <tr>
                                    <th scope="row">MySQL Databases</th>
                                    <td>Unlimited</td>
                                    <td>Unlimited</td>
                                    <td>Unlimited</td>
                                    <td>Unlimited</td>
                                </tr>
                                <tr>
                                    <th scope="row">Setup</th>
                                    <td>19.90 $</td>
                                    <td>12.90 $</td>
                                    <td>free</td>
                                    <td>free</td>
                                </tr>
                                <tr>
                                    <th scope="row">PHP 5</th>
                                    <td><span class="check"></span></td>
                                    <td><span class="check"></span></td>
                                    <td><span class="check"></span></td>
                                    <td><span class="check"></span></td>
                                </tr>
                                <tr>
                                    <th scope="row">Ruby on Rails</th>
                                    <td><span class="check"></span></td>
                                    <td><span class="check"></span></td>
                                    <td><span class="check"></span></td>
                                    <td><span class="check"></span></td>
                                </tr>
                            </tbody>
                        </table>
                    </center>
        
                    <h2 class="table-title">Table Style 2</h2>
                    <center>
                        <table class="table2">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th scope="col" abbr="Starter">Smart Starter</th>
                                    <th scope="col" abbr="Medium">Smart Medium</th>
                                    <th scope="col" abbr="Business">Smart Business</th>
                                    <th scope="col" abbr="Deluxe">Smart Deluxe</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th scope="row">Price per month</th>
                                    <td>$ 2.90</td>
                                    <td>$ 5.90</td>
                                    <td>$ 9.90</td>
                                    <td>$ 14.90</td>
                                </tr>
                            </tfoot>
                            <tbody>
                                <tr>
                                    <th scope="row">Storage Space</th>
                                    <td>512 MB</td>
                                    <td>1 GB</td>
                                    <td>2 GB</td>
                                    <td>4 GB</td>
                                </tr>
                                <tr>
                                    <th scope="row">Bandwidth</th>
                                    <td>50 GB</td>
                                    <td>100 GB</td>
                                    <td>150 GB</td>
                                    <td>Unlimited</td>
                                </tr>
                                <tr>
                                    <th scope="row">MySQL Databases</th>
                                    <td>Unlimited</td>
                                    <td>Unlimited</td>
                                    <td>Unlimited</td>
                                    <td>Unlimited</td>
                                </tr>
                                <tr>
                                    <th scope="row">Setup</th>
                                    <td>19.90 $</td>
                                    <td>12.90 $</td>
                                    <td>free</td>
                                    <td>free</td>
                                </tr>
                                <tr>
                                    <th scope="row">PHP 5</th>
                                    <td><span class="check"></span></td>
                                    <td><span class="check"></span></td>
                                    <td><span class="check"></span></td>
                                    <td><span class="check"></span></td>
                                </tr>
                                <tr>
                                    <th scope="row">Ruby on Rails</th>
                                    <td><span class="check"></span></td>
                                    <td><span class="check"></span></td>
                                    <td><span class="check"></span></td>
                                    <td><span class="check"></span></td>
                                </tr>
                            </tbody>
                        </table>
                    </center>
        
                    <h2 class="table-title">Table Style 3</h2>
                    <center>
                        <table class="table3">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th scope="col" abbr="Starter">Smart Starter</th>
                                    <th scope="col" abbr="Medium">Smart Medium</th>
                                    <th scope="col" abbr="Business">Smart Business</th>
                                    <th scope="col" abbr="Deluxe">Smart Deluxe</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th scope="row">Price per month</th>
                                    <td>$ 2.90</td>
                                    <td>$ 5.90</td>
                                    <td>$ 9.90</td>
                                    <td>$ 14.90</td>
                                </tr>
                            </tfoot>
                            <tbody>
                                <tr>
                                    <th scope="row">Storage Space</th>
                                    <td>512 MB</td>
                                    <td>1 GB</td>
                                    <td>2 GB</td>
                                    <td>4 GB</td>
                                </tr>
                                <tr>
                                    <th scope="row">Bandwidth</th>
                                    <td>50 GB</td>
                                    <td>100 GB</td>
                                    <td>150 GB</td>
                                    <td>Unlimited</td>
                                </tr>
                                <tr>
                                    <th scope="row">MySQL Databases</th>
                                    <td>Unlimited</td>
                                    <td>Unlimited</td>
                                    <td>Unlimited</td>
                                    <td>Unlimited</td>
                                </tr>
                                <tr>
                                    <th scope="row">Setup</th>
                                    <td>19.90 $</td>
                                    <td>12.90 $</td>
                                    <td>free</td>
                                    <td>free</td>
                                </tr>
                                <tr>
                                    <th scope="row">PHP 5</th>
                                    <td><span class="check"></span></td>
                                    <td><span class="check"></span></td>
                                    <td><span class="check"></span></td>
                                    <td><span class="check"></span></td>
                                </tr>
                                <tr>
                                    <th scope="row">Ruby on Rails</th>
                                    <td><span class="check"></span></td>
                                    <td><span class="check"></span></td>
                                    <td><span class="check"></span></td>
                                    <td><span class="check"></span></td>
                                </tr>
                            </tbody>
                        </table>
                    </center>
                    
                    <h2 class="table-title">Table Style 4</h2>
                    <center>
                    	<table class="table4" cellspacing='0'> <!-- cellspacing='0' is important, must stay -->
                            <tr><th>Task Details</th><th>Progress</th><th>Vital Task</th></tr><!-- Table Header -->
                            
                        	<tr><td>Create pretty table design</td><td>100%</td><td>Yes</td></tr><!-- Table Row -->
                            <tr class='even'><td>Take the dog for a walk</td><td>100%</td><td>Yes</td></tr><!-- Darker Table Row -->
                        
                            <tr><td>Waste half the day on Twitter</td><td>20%</td><td>No</td></tr>
                            <tr class='even'><td>Feel inferior after viewing Dribble</td><td>80%</td><td>No</td></tr>
                            
                            <tr><td>Wince at "to do" list</td><td>100%</td><td>Yes</td></tr>
                            <tr class='even'><td>Vow to complete personal project</td><td>23%</td><td>yes</td></tr>
                        
                            <tr><td>Procrastinate</td><td>80%</td><td>No</td></tr>
                            <tr class='even'><td><a href="#yep-iit-doesnt-exist">Hyperlink Example</a></td><td>80%</td><td><a href="#inexistent-id">Another</a></td></tr>
                        </table>
                    </center>
                    
                    				
                </section><!--end:element-box-->                   

        </div><!--end:main-content-->
        <div class="clear"></div>
    </div><!--end:wrapper-->
	
	<style type="text/css"> 
		#cssawards {
			position:fixed; 
			bottom:0px; right:0px;
            z-index:9999; 
		} 
		#cssawards a {
        	width:140px; 
			height:140px;
            text-indent:-8000px; 
			display:block;
            background:url(cssa-brand.png) no-repeat; 
		} 
    </style> 
    
    <div id="cssawards">
    	<a class="moz-txt-link-rfc2396E" href="http://cssa.ws/146223v" target="_blank">http://www.cssawards.net/yoursiteurl</a>
	</div>
	
</body>
</html>